<template>
  <div style="padding: 20px 40px">
    <div class="yh_topsearch cuPo cuPoJub" style="border: none; padding: 0px; margin-top: 20px">
      <div class="dis disAl" style="margin-top: 10px">
        <div style="margin-left: 10px">
          <div class="foSi12 hei22" style="color: #979797">班级名称</div>
          <el-select v-model="search.class_id" style="width: 140px" size="small" placeholder="请选择">
            <el-option
              v-for="item in search.classlist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div style="margin-left: 10px">
          <div class="foSi12 hei22" style="color: #979797">课程名称</div>
          <el-select v-model="search.course_id" style="width: 140px" size="small" placeholder="请选择">
            <el-option
              v-for="item in search.courselist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div style="margin-left: 10px">
          <div class="foSi12 hei22" style="color: #979797">老师名称</div>
          <el-select v-model="search.tearch_id" style="width: 140px" size="small" placeholder="请选择">
            <el-option
              v-for="item in search.tearchlist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div style="margin-left: 10px">
          <el-button type="primary" size="small" class="bac6b7" style="margin-top: 22px">搜索</el-button>
        </div>
      </div>
    </div>
    <div class="toptime dis disAl disJuB mar-top10">
      <div />
      <div class="dis disAl">
        <div class="mar-right10 l-r" @click="up_daytime(0)"><i
          class="el-icon-arrow-left"
          style="color: #6b7cdd"
        /></div>
        <!-- <el-date-picker v-model="daytime" type="date" placeholder="选择日期" /> -->
        <div class="mar-left15 mar-right15 foSi18 xuanze">{{ daytime }}</div>
        <div class="mar-left10 l-r" @click="up_daytime(1)"><i
          class="el-icon-arrow-right"
          style="color: #6b7cdd"
        /></div>
        <div class="mar-left10">
          <el-button type="success" size="small" class="bac6b7" @click="gettime()">返回今天</el-button>
        </div>
      </div>
      <div />
    </div>
    <!--  排课  -->
    <div class="xian mar-top20" />
    <div class="mar-top20 mar-bott20">
      <!--   空   -->
      <div v-if="course_list.length <= 0">
        <div class="dis disAl" style="flex-direction: column">
          <img src="../../assets/member/card/empty.png">
          <div style="color: #8c8c8c" class="mar-top10">暂无排课</div>
        </div>
      </div>
      <!--   不为空   -->
      <div v-if="course_list.length > 0" id="courseSlide" style="width: 100%;height: 210px;overflow: hidden;min-width: 1060px;" class="">
        <div id="courseSlide1" style="display: inline-flex;">
          <div
            v-for="(item,index) in course_list"
            :key="index"
            class="items mar-right20 cuPo"
            :class="item.id === search_course_id ? 'cur_choice' : ''"
            style="border: 1px solid #ccc;float: left;height: 210px"
            @click="course_change(item.id)"
          >
            <div
              class="dis"
              style="width: 100%;justify-content: space-between;background-color: #ededef;padding: 10px;min-height: 85px"
            >
              <div style="font-size: 14px" :style="{'color':item.class_state === 0 ? '#b2b2b2' : ''}">
                <div>{{ item.class_name }}</div>
                <div class="mar-top5 ">{{ item.name }}</div>
              </div>
              <div><img src="../../assets/member/card/quality.png"></div>
              <div>
                <div :style="'background: #'+item.colors+';'" style="width: 20px;height: 20px;" />
              </div>
            </div>
            <div
              style="color:#b2b2b2;font-size: 12px;padding: 10px;height: 123px"
              :class="item.class_state === 0 ? 'huise' : ''"
            >
              <div class="dis" style="justify-content: right;margin-top: -25px;align-items: baseline;">
                <div
                  style="font-size: 14px;font-weight: 400;color: #000;margin-right: 5px"
                  :style="{'color':item.class_state === 0 ? '#b2b2b2' : ''}"
                >{{ item.coach_name }}
                </div>
                <div><img
                  :src="item.coach_cover_img"
                  style="width: 40px;height: 40px;border-radius: 5px"
                >
                </div>
              </div>
              <div style="height: 20px" />
              <div>{{ item.classroom_name }}</div>
              <div class="mar-top5 ">{{ item.class_start_time }} - {{ item.class_end_time }}
              </div>
              <div class="dis disJuB">
                <div class="yybtn" @click.stop="zuoye(item)">作业</div>
                <div class="jcsjbtn" @click.stop="shunjian(item)">精彩瞬间</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div />
    </div>
    <!-- 作业弹窗 -->
    <div v-if="is_zuoye_show" id="commonBg" class="m-dialog-bg" />
    <div class="m-dialog-box fade-in" style="font-size: 14px;">
      <div class="dialog-content">
        <div v-if="is_zuoye_show" class="dialog-content">
          <div class="dialog-content-header">
            <div class="dialog-title">
              <span class="title-type"> 作业 </span>
              <em class="icon icon-card-tips2 ml-10 order-handle" />
            </div>
            <span class="dialog-close js-dialog_close" @click="is_zuoye_show = false" />
          </div>
          <div class="dialog-content-main">
            <!-- 团课预约 -->
            <div class="m-wkt-order flex-edit-box">
              <div class="field-box field-wk-notes-box">
                <div class="item clear">
                  <div class="dis mar-right20" style="padding-top: 10px;">作业</div>
                  <div class="class-desc">
                    <!--                   bhy6gt5cfr3-->
                    <el-upload
                      action="#"
                      :http-request="handleAvatarSuccess1"
                      :before-upload="beforeAvatarUpload"
                      :show-file-list="false"
                    >
                      <i class="el-icon-plus" />
                    </el-upload>
                    <div
                      id="richId"
                      class="rich-row"
                      contenteditable="true"
                      @click="handleSelection"
                      @input="handleSelection"
                    />
                  </div>
                </div>
              </div>
            </div>
            <!-- /团课预约 -->
          </div>
          <div class="posr dialog-content-footer">
            <el-button
              type="primary"
              class="mr-20 btn-autox34 btn-check-wk"
              @click="close_zuoye"
            >保存</el-button>
            <el-button
              type="info"
              class="btn-autox34_disabled js-dialog_close"
              @click="is_zuoye_show = false"
            >取消</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 瞬间弹窗 -->
    <div v-if="is_shunjian_show" id="commonBg" class="m-dialog-bg" />
    <div class="m-dialog-box fade-in" style="font-size: 14px;">
      <div class="dialog-content">
        <div v-if="is_shunjian_show" class="dialog-content">
          <div class="dialog-content-header">
            <div class="dialog-title">
              <span class="title-type"> 精彩瞬间 </span>
              <em class="icon icon-card-tips2 ml-10 order-handle" />
            </div>
            <span class="dialog-close js-dialog_close" @click="is_shunjian_show = false" />
          </div>
          <div class="dialog-content-main">
            <!-- 团课预约 -->
            <div class="m-wkt-order flex-edit-box">
              <div class="field-box field-wk-notes-box">
                <div class="item clear">
                  <div class="dis disAl mar-top10">
                    <div style="min-width: 130px;" />
                    <div class="dis disAl flwa">
                      <el-upload
                        class="upImg1"
                        style="width: 104px;height: 104px;margin-bottom:15px;margin-right: 20px;"
                        action="#"
                        :http-request="handleAvatarSuccess2"
                        :before-upload="beforeAvatarUpload"
                        list-type="picture-card"
                        :show-file-list="false"
                      >
                        <!--                        <div class="que coFFF">上传图片</div>-->
                        <i class="el-icon-plus" />
                      </el-upload>
                      <div
                        v-for="(item,index) in pics"
                        :key="index"
                        class="poRel mar-right20 mar-bott15"
                        style="width: 104px;height: 104px;background-color: #f6f6f6;"
                      >
                        <svg-icon
                          icon-class="guanbi"
                          class="mar0 poAbs cuPo"
                          style="color: #000;width: 20px;height: 20px; top: -10px;right: -10px;z-index: 10;"
                          @click.stop="deletePics(index)"
                        />
                        <img :src="item" class="wh100"></img>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- /团课预约 -->
          </div>
          <div class="posr dialog-content-footer">
            <el-button
              type="primary"
              class="mr-20 btn-autox34 btn-check-wk"
              @click="close_shunjian"
            >保存</el-button>
            <el-button
              type="info"
              class="btn-autox34_disabled js-dialog_close"
              @click="is_zuoye_show = false"
            >取消</el-button>
          </div>
        </div>
      </div>
    </div>

    <div v-loading="loading" style="padding: 15px 30px">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column width="300" label="会员信息">
          <template slot-scope="scope">
            <div class="dis disAl">
              <img :src="scope.row.avatar" style="width: 30px;height: 30px; margin-right: 10px; border-radius: 5px;">
              {{ scope.row.member_name }}
              {{ scope.row.member_tel }}
            </div>

          </template>
        </el-table-column>
        <el-table-column prop="begins_num" label="已上课时" />
        <el-table-column prop="surplus_class_hour" label="剩余课时" />
        <el-table-column prop="leave_num" label="已请假" />
        <el-table-column prop="leave" label="剩余假期" />
        <el-table-column prop="status" label="状态" />
        <el-table-column
          :label="$t('table.actions')"
          align="center"
          width="300"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <div class="cuPo dis" style="justify-content: center">
              <div v-if="scope.row.status === '已签到'"class="cuPo" style="align-items: center; margin-right: 10px">
                <i class="el-icon-circle-close" style="color: rgb(25, 165, 88); font-size: 18px" />签到
              </div>
              <div v-else class="cuPo" style="align-items: center; margin-right: 10px" @click.stop="statuss(scope.row.id,1)">
                <i class="el-icon-circle-close" style="color: rgb(25, 165, 88); font-size: 18px" />签到
              </div>

              <div v-if="scope.row.status === '已请假'" class="cuPo" style="align-items: center; margin-right: 10px">
                <i class="el-icon-circle-close" style="color: rgb(25, 165, 88); font-size: 18px" />请假
              </div>
              <div v-else class="cuPo" style="align-items: center; margin-right: 10px" @click.stop="statuss(scope.row.id,2)">
                <i class="el-icon-circle-close" style="color: rgb(25, 165, 88); font-size: 18px" />请假
              </div>

              <div v-if="scope.row.status === '已请假'" class="cuPo" style="align-items: center; margin-right: 10px" @click.stop="statuss(scope.row.id,0)">
                <i class="el-icon-circle-close" style="color: rgb(25, 165, 88); font-size: 18px" />取消请假
              </div>
              <div v-else class="cuPo" style="align-items: center; margin-right: 10px">
                <i class="el-icon-circle-close" style="color: rgb(25, 165, 88); font-size: 18px" />取消请假
              </div>

              <div v-if="scope.row.status === '已旷课'" class="cuPo" style="align-items: center; margin-right: 10px">
                <i class="el-icon-circle-close" style="color: rgb(25, 165, 88); font-size: 18px" />旷课
              </div>
              <div v-else class="cuPo" style="align-items: center; margin-right: 10px" @click.stop="statuss(scope.row.id,3)">
                <i class="el-icon-circle-close" style="color: rgb(25, 165, 88); font-size: 18px" />旷课
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="dis" style=" margin-top: 20px;justify-content: center">
        <div style="margin-top: 8px">共0条记录，每页10条</div>
        <el-pagination
          :current-page.sync="listQuery.page"
          :page-size="15"
          layout="prev, pager, next, jumper"
          :total="listQuery.limit"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  mapGetters
} from 'vuex'
import {
  appointmentRecord,
  getBanKeList,
  getZuoye,
  getBankeZuoye,
  getShunjian,
  getBankeShunjian,
  getClassMemberList,
  getStatus
} from '@/api/dashboard'
import { getTelListmember } from '@/api/member'
import { uploadimg } from '@/api/utils'

export default {
  name: 'Dashboard',
  data() {
    return {
      id: 0,
      search_course_id: null, // 日课表选中的课程ID
      brief: '',
      course_list: [],
      pics: [],
      listQuery: {
        page: 1,
        limit: 0
      },
      daytime: '', // 单日搜索
      todayatime: 0,
      search: {
        // 班级搜索
        classlist: [{
          label: '全部',
          value: 0
        }],
        class_id: 0,
        // 课程名称
        courselist: [{
          label: '全部',
          value: 0
        }],
        course_id: 0,
        // 老师搜索
        tearchlist: [{
          label: '全部',
          value: 0
        }],
        tearch_id: 0
      },
      currentRole: 'adminDashboard',
      loading: false,
      // 预约
      tableData: [],
      multipleSelection: [],
      is_zuoye_show: false,
      is_shunjian_show: false
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {
    if (!this.roles.includes('admin')) {
      this.currentRole = 'editorDashboard'
    }
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: [{
        name: '团课预约记录',
        url: '/dashboard',
        pd: true
      },
      {
        name: '私教预约记录',
        url: '/privateappointment',
        pd: true
      },
      {
        name: '爽约惩罚',
        url: '/punishment',
        pd: true
      },
      {
        name: '储物柜',
        url: '/locker',
        pd: true
      },
      {
        name: '请假管理',
        url: '/leavemanage',
        pd: true
      },
      {
        name: '班课上课记录',
        url: '/classrecord',
        pd: true
      }
      ]
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 5
    })
    this.gettime()
    this.getdata()
  },
  methods: {
    statuss(id, status) {
      getStatus({
        'id': id,
        'status': status,
        'courseschool_id': this.search_course_id
      }).then(response => {
        const {
          data
        } = response
        console.log(data)
        this.coureschange(this.btn_choice)
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    course_change(id) {
      this.search_course_id = id
      this.listQuery.page = 1
      this.coureschange(this.btn_choice)
    },
    coureschange(type) {
      this.loading = true
      if (type !== this.btn_choice) {
        this.listQuery.page = 1
      }
      this.btn_choice = type
      this.getAppointmentRecord(this.search_course_id)
    },
    getAppointmentRecord(id) {
      getClassMemberList({
        'courseschool_id': id,
        'times': this.daytime
      }).then(response => {
        const {
          data
        } = response
        console.log(data)
        this.reservation_num = data.reservation_num
        this.line_num = data.line_num
        this.tableData = data.data
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    deletePics(index) {
      this.pics.splice(index, 1)
    },
    // 保存作业
    close_zuoye() {
      getBankeZuoye({ 'id': this.id, 'class_work': this.brief }).then(response => {
        const {
          data
        } = response
        this.is_zuoye_show = false
      }).catch(error => {
        console.log(error)
      })
    },
    // 保存瞬间
    close_shunjian() {
      getBankeShunjian({ 'id': this.id, 'class_moment': this.pics.join(',') }).then(response => {
        const {
          data
        } = response
        this.is_shunjian_show = false
      }).catch(error => {
        console.log(error)
      })
    },
    handleTag() {
      const parseDom = this.parseDom(`<img src="${this.imageUrl}">`)
      // 在光标处插入dom
      this.range.insertNode(parseDom)
      // 光标开始和光标结束重叠
      this.range.collapse(true)
    },
    // 记录光标位置等 （debounce防抖提升性能）
    handleSelection(e) {
      this.selection = getSelection()
      // 光标对象
      this.range = this.selection.getRangeAt(0)
      // 获取光标对象的范围界定对象
      this.textNode = this.range.startContainer
      // 获取光标位置
      this.rangeStartOffset = this.range.startOffset
      this.brief = e.target.innerHTML
    },
    handleAvatarSuccess1(file) {
      var that = this
      const mf = new FormData()
      mf.append('file', file.file)
      uploadimg(mf).then(response => {
        that.imageUrl = response.data
        that.handleTag()
      })
    },
    handleAvatarSuccess2(file) {
      var that = this
      const mf = new FormData()
      mf.append('file', file.file)
      uploadimg(mf).then(response => {
        console.log(response)
        // that.pics = response.data
        that.pics.push(response.data)
        // that.handleTag()
      })
    },
    // 转dom对象
    parseDom(arg) {
      var objE = document.createElement('div')
      objE.innerHTML = arg
      return objE.childNodes[0]
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG或PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isJPG && isLt2M
    },
    zuoye(item) {
      console.log(item)
      getZuoye({ 'id': item.id }).then(response => {
        const {
          data
        } = response
        this.is_zuoye_show = true
        // this.group = item
        setTimeout(() => {
          this.id = item.id
          this.brief = data.class_work
          console.log(data.class_work)
          var divID = document.getElementById('richId')
          console.log(divID)
          divID.innerHTML = data.class_work
        }, 200)
      }).catch(error => {
        console.log(error)
      })
    },
    shunjian(item) {
      console.log(item)
      getShunjian({ 'id': item.id }).then(response => {
        const {
          data
        } = response
        this.is_shunjian_show = true
        setTimeout(() => {
          this.id = item.id
          this.pics = data.class_moment.split(',')
          console.log(data.pics)
        }, 200)
      }).catch(error => {
        console.log(error)
      })
    },
    getdata() {
      var params = this.search
      params.daytime = this.daytime
      getBanKeList(params).then(response => {
        const {
          data
        } = response
        console.log(data)
        this.course_list = data.data
        // this.nameVisible = true
      }).catch(error => {
        console.log(error)
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    gettime() {
      const now = new Date()
      const year = now.getFullYear()
      const month = now.getMonth() + 1
      const day = now.getDate()
      this.todayatime = 0
      this.daytime = year + '-' + month + '-' + day
    },
    up_daytime(type) {
      const now = new Date()
      now.setDate(now.getDate() + (type === 1 ? this.todayatime + 1 : this.todayatime - 1)) // 获取AddDayCount天后的日期
      const year = now.getFullYear()
      var month = (now.getMonth() + 1) < 10 ? '0' + (now.getMonth() + 1) : (now.getMonth() + 1) // 获取当前月份的日期，不足10补0
      var day = now.getDate() < 10 ? '0' + now.getDate() : now.getDate() // 获取当前几号，不足10补0
      type === 1 ? this.todayatime++ : this.todayatime--
      this.daytime = year + '-' + month + '-' + day
      this.getdata()
    }
  }
}
</script>
<style>

	.xuanze {
		-moz-user-select: none;
		/*火狐*/
		-webkit-user-select: none;
		/*webkit浏览器*/
		-ms-user-select: none;
		/*IE10*/
		-khtml-user-select: none;
		/*早期浏览器*/
		user-select: none;
	}

  .class-desc {
    width: 721px;
    height: 230px;
    border: 1px solid #d9d9d9;
    padding: 5px;
    line-height: 1.5;
  }

  .rich-insert {
    width: 100%;
    height: 30px;
    padding: 2px 5px;
    position: relative;
    vertical-align: text-top;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  .rich-row {
    width: 100%;
    height: calc(100% - 31px);
    border: 0;
    background-color: #fff;
    box-sizing: border-box;
    padding: 5px;
    margin-top: 1px;
    outline: 0;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  ::v-deep .el-upload:focus {
    color: #000 !important;
  }

  ::v-deep .el-upload-list {
    display: none;
  }

  ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #6b7cdd;
    border-color: #6b7cdd;
  }

  ::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #6b7cdd;
  }

  ::v-deep .el-checkbox__label {
    color: #000 !important;
  }

  .avatar-tips {
    position: absolute;
    bottom: 3px;
    left: 5px;
    z-index: 10;
    color: #fff;
    font-size: 12px;
  }

  .que {
    display: inline-block;
    padding: 0 24px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    vertical-align: top;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .el-upload--picture-card{
    width: 104px;
    height: 104px;
  }
  .el-upload--picture-card{
    line-height: 104px;
  }
</style>
